import React, { useEffect, useState } from 'react';
import { Space, Table, Tag,Pagination  } from 'antd';
import type { TableProps } from 'antd';
import axios from 'axios';

function index() {
  const [data,setData]=useState([])
  const [page,setPage]=useState(1)
  const [pageSize,setPageSize]=useState(10)
  const [total,setTotal]=useState(0)
  const getdata=async()=>{
    const res=await axios.get('/api/article/list',{params:{page,pageSize}})
    console.log(res)
    setData(res.data.rows)
    setTotal(res.data.count)
  }
  useEffect(()=>{
    getdata()
  },[])
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id', 
    },
    {
      title: 'title',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: 'content',
      dataIndex: 'content',
      key: 'content',
    }, 
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>修改 </a>
          <a>删除</a>
        </Space>
      ),
    },
  ];
  return (
    <div>
      <Table<DataType> columns={columns} dataSource={data} 
        pagination={{
          total,
          pageSize,
          current:page,
          showSizeChanger:true,
          showQuickJumper:true,
          onChange:(page,pageSize)=>{
            setPage(page)
            setPageSize(pageSize)
            getdata()
          }
        }}
      />
    </div>
  )
}

export default index
